<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>区块链资产管理系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            accent: '#722ED1',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            dark: '#1D2129',
            light: '#F2F3F5'
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      }
      .btn-hover {
        transition: all 0.3s ease;
      }
      .btn-hover:hover {
        transform: translateY(-2px);
      }
      .gradient-bg {
        background: linear-gradient(135deg, #165DFF 0%, #722ED1 100%);
      }
      .input-focus {
        transition: all 0.2s ease;
      }
      .input-focus:focus {
        border-color: #165DFF;
        box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
      }
      .fade-in {
        animation: fadeIn 0.5s ease-in-out;
      }
      .slide-up {
        animation: slideUp 0.5s ease-out;
      }
      .pulse {
        animation: pulse 2s infinite;
      }
      .scale-hover {
        transition: transform 0.3s ease;
      }
      .scale-hover:hover {
        transform: scale(1.03);
      }
      .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
      }
      .nav-shadow {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      }
      .text-balance {
        text-wrap: balance;
      }
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes slideUp {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    
    @keyframes loading {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-dark antialiased">
  <!-- 顶部导航栏 -->
  <header class="bg-white fixed w-full z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa-brands fa-hyperledger text-primary text-2xl"></i>
        <h1 class="text-xl font-bold text-primary">区块链资产管理系统</h1>
      </div>
      <nav class="hidden md:flex items-center space-x-6">
        <a href="#create" class="text-gray-700 hover:text-primary transition-colors duration-300 relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-primary after:transition-all">资产上链</a>
        <a href="#query" class="text-gray-700 hover:text-primary transition-colors duration-300 relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-primary after:transition-all">资产查询</a>
        <a href="#transfer" class="text-gray-700 hover:text-primary transition-colors duration-300 relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-primary after:transition-all">资产转移</a>
        <a href="#history" class="text-gray-700 hover:text-primary transition-colors duration-300 relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-primary after:transition-all">交易历史</a>
      </nav>
      <button class="md:hidden text-gray-700" id="menu-toggle">
        <i class="fa-solid fa-bars text-xl"></i>
      </button>
    </div>
    <!-- 移动端菜单 -->
    <div class="md:hidden hidden bg-white w-full" id="mobile-menu">
      <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
        <a href="#create" class="text-gray-700 hover:text-primary py-2 transition-colors duration-300">资产上链</a>
        <a href="#query" class="text-gray-700 hover:text-primary py-2 transition-colors duration-300">资产查询</a>
        <a href="#transfer" class="text-gray-700 hover:text-primary py-2 transition-colors duration-300">资产转移</a>
        <a href="#history" class="text-gray-700 hover:text-primary py-2 transition-colors duration-300">交易历史</a>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="container mx-auto px-4 pt-24 pb-12">
    <!-- 欢迎区域 -->
    <section class="mb-12 text-center">
      <div class="gradient-bg text-white p-8 rounded-2xl shadow-xl mb-8 slide-up relative overflow-hidden">
        <div class="absolute inset-0 opacity-10">
          <div class="absolute -right-10 -top-10 w-40 h-40 rounded-full bg-white"></div>
          <div class="absolute left-1/4 bottom-10 w-20 h-20 rounded-full bg-white"></div>
          <div class="absolute right-1/3 top-1/2 w-32 h-32 rounded-full bg-white"></div>
        </div>
        <div class="relative">
          <h2 class="text-[clamp(1.8rem,4vw,3rem)] font-bold mb-4">区块链资产管理平台</h2>
          <p class="text-[clamp(1rem,2vw,1.2rem)] max-w-3xl mx-auto opacity-90 text-balance">使用 Hyperledger Fabric 技术构建的安全、透明、高效的资产数字化管理系统</p>
        </div>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 scale-hover">
          <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4 pulse">
            <i class="fa-solid fa-plus text-primary text-xl"></i>
          </div>
          <h3 class="text-lg font-semibold mb-2">资产上链</h3>
          <p class="text-gray-600">将实体资产数字化，记录到区块链上，确保资产信息的不可篡改和透明性</p>
        </div>
        <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 scale-hover">
          <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center mb-4 pulse">
            <i class="fa-solid fa-search text-secondary text-xl"></i>
          </div>
          <h3 class="text-lg font-semibold mb-2">资产查询</h3>
          <p class="text-gray-600">通过资产ID快速查询链上资产的详细信息和历史记录</p>
        </div>
        <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 scale-hover">
          <div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mb-4 pulse">
            <i class="fa-solid fa-exchange text-accent text-xl"></i>
          </div>
          <h3 class="text-lg font-semibold mb-2">资产转移</h3>
          <p class="text-gray-600">安全、高效地完成资产所有权的转移，所有操作都会被永久记录</p>
        </div>
      </div>
    </section>

    <!-- 资产上链区域 -->
    <section id="create" class="mb-12">
      <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 mb-8 slide-up" style="animation-delay: 0.1s;">
        <div class="flex items-center mb-6">
          <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
            <i class="fa-solid fa-plus text-primary"></i>
          </div>
          <h2 class="text-xl md:text-2xl font-bold">资产上链</h2>
        </div>
        <form id="create-form" class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="slide-up" style="animation-delay: 0.2s;">
              <label for="create-id" class="block text-sm font-medium text-gray-700 mb-1">资产ID</label>
              <div class="relative">
                <input type="text" id="create-id" name="create-id" required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus">
                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                  <i class="fa-solid fa-id-card text-gray-400"></i>
                </div>
              </div>
            </div>
            <div class="slide-up" style="animation-delay: 0.3s;">
              <label for="create-owner" class="block text-sm font-medium text-gray-700 mb-1">所有者</label>
              <div class="relative">
                <input type="text" id="create-owner" name="create-owner" required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus">
                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                  <i class="fa-solid fa-user text-gray-400"></i>
                </div>
              </div>
            </div>
            <div class="slide-up" style="animation-delay: 0.4s;">
              <label for="create-name" class="block text-sm font-medium text-gray-700 mb-1">资产名称</label>
              <div class="relative">
                <input type="text" id="create-name" name="create-name" required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus">
                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                  <i class="fa-solid fa-tag text-gray-400"></i>
                </div>
              </div>
            </div>
            <div class="slide-up" style="animation-delay: 0.5s;">
              <label for="create-info" class="block text-sm font-medium text-gray-700 mb-1">资产信息</label>
              <div class="relative">
                <input type="text" id="create-info" name="create-info" required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus">
                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                  <i class="fa-solid fa-info-circle text-gray-400"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="flex justify-end slide-up" style="animation-delay: 0.6s;">
            <button type="submit" id="create-btn"
              class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg font-medium btn-hover flex items-center">
              <i class="fa-solid fa-plus-circle mr-2"></i> 提交上链
            </button>
          </div>
        </form>
      </div>
      <div id="create-result" class="hidden bg-white rounded-xl shadow-lg p-6 md:p-8 fade-in">
        <div class="flex items-center mb-4">
          <div class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center mr-3">
            <i class="fa-solid fa-check text-success"></i>
          </div>
          <h3 class="text-lg font-bold text-success">资产上链成功</h3>
        </div>
        <div class="bg-gray-50 p-4 rounded-lg mb-4">
          <pre id="create-result-json" class="text-gray-700 whitespace-pre-wrap break-words"></pre>
        </div>
        <div class="flex justify-end">
          <button id="create-close" class="text-gray-500 hover:text-gray-700">
            <i class="fa-solid fa-times"></i> 关闭
          </button>
        </div>
      </div>
    </section>

    <!-- 资产查询区域 -->
    <section id="query" class="mb-12">
      <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 mb-8 slide-up" style="animation-delay: 0.2s;">
        <div class="flex items-center mb-6">
          <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center mr-3">
            <i class="fa-solid fa-search text-secondary"></i>
          </div>
          <h2 class="text-xl md:text-2xl font-bold">资产查询</h2>
        </div>
        <div class="flex flex-col md:flex-row gap-4 mb-4">
          <div class="relative flex-1 slide-up" style="animation-delay: 0.3s;">
            <input type="text" id="query-id" placeholder="请输入资产ID" required
              class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus pl-10">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
              <i class="fa-solid fa-search text-gray-400"></i>
            </div>
          </div>
          <button type="button" id="query-btn"
            class="bg-secondary hover:bg-secondary/90 text-white px-6 py-2 rounded-lg font-medium btn-hover flex items-center justify-center slide-up" style="animation-delay: 0.4s;">
            <i class="fa-solid fa-search mr-2"></i> 查询
          </button>
        </div>
      </div>
      <div id="query-loading" class="hidden bg-white rounded-xl shadow-lg p-6 md:p-8 text-center fade-in">
        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-4"></div>
        <p class="text-gray-600">正在查询资产信息...</p>
      </div>
      <div id="query-result" class="hidden bg-white rounded-xl shadow-lg p-6 md:p-8 fade-in">
        <div class="flex items-center justify-between mb-6">
          <div class="flex items-center">
            <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center mr-3">
              <i class="fa-solid fa-info text-secondary"></i>
            </div>
            <h3 class="text-lg font-bold">资产详情</h3>
          </div>
          <span id="query-asset-id" class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm"></span>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
          <div class="slide-up" style="animation-delay: 0.1s;">
            <h4 class="text-sm font-medium text-gray-500 mb-1">资产名称</h4>
            <p id="query-name" class="text-lg font-semibold"></p>
          </div>
          <div class="slide-up" style="animation-delay: 0.2s;">
            <h4 class="text-sm font-medium text-gray-500 mb-1">当前所有者</h4>
            <p id="query-owner" class="text-lg font-semibold"></p>
          </div>
          <div class="slide-up" style="animation-delay: 0.3s;">
            <h4 class="text-sm font-medium text-gray-500 mb-1">资产信息</h4>
            <p id="query-info" class="text-lg font-semibold"></p>
          </div>
          <div class="slide-up" style="animation-delay: 0.4s;">
            <h4 class="text-sm font-medium text-gray-500 mb-1">上链时间</h4>
            <p id="query-timestamp" class="text-lg font-semibold"></p>
          </div>
        </div>
        <div class="bg-gray-50 p-4 rounded-lg mb-6 slide-up" style="animation-delay: 0.5s;">
          <h4 class="text-sm font-medium text-gray-500 mb-2">资产完整信息</h4>
          <pre id="query-result-json" class="text-gray-700 whitespace-pre-wrap break-words"></pre>
        </div>
        <div class="flex justify-end slide-up" style="animation-delay: 0.6s;">
          <button id="transfer-from-query" class="bg-accent hover:bg-accent/90 text-white px-6 py-2 rounded-lg font-medium btn-hover flex items-center">
            <i class="fa-solid fa-exchange mr-2"></i> 转移此资产
          </button>
        </div>
      </div>
      <div id="query-not-found" class="hidden bg-white rounded-xl shadow-lg p-6 md:p-8 text-center fade-in">
        <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-4 pulse">
          <i class="fa-solid fa-exclamation-triangle text-gray-400 text-2xl"></i>
        </div>
        <h3 class="text-lg font-bold text-gray-700 mb-2">未找到该资产</h3>
        <p class="text-gray-500 mb-4">请检查输入的资产ID是否正确</p>
        <button id="query-try-again" class="text-primary hover:text-primary/80 font-medium">
          <i class="fa-solid fa-refresh mr-1"></i> 重新查询
        </button>
      </div>
    </section>

    <!-- 资产转移区域 -->
    <section id="transfer" class="mb-12">
      <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 mb-8 slide-up" style="animation-delay: 0.3s;">
        <div class="flex items-center mb-6">
          <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center mr-3">
            <i class="fa-solid fa-exchange text-accent"></i>
          </div>
          <h2 class="text-xl md:text-2xl font-bold">资产转移</h2>
        </div>
        <form id="transfer-form" class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="slide-up" style="animation-delay: 0.4s;">
              <label for="transfer-id" class="block text-sm font-medium text-gray-700 mb-1">资产ID</label>
              <div class="relative">
                <input type="text" id="transfer-id" name="transfer-id" required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus">
                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                  <i class="fa-solid fa-id-card text-gray-400"></i>
                </div>
              </div>
            </div>
            <div class="slide-up" style="animation-delay: 0.5s;">
              <label for="transfer-owner" class="block text-sm font-medium text-gray-700 mb-1">新所有者</label>
              <div class="relative">
                <input type="text" id="transfer-owner" name="transfer-owner" required
                  class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus">
                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                  <i class="fa-solid fa-user-plus text-gray-400"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="flex justify-end slide-up" style="animation-delay: 0.6s;">
            <button type="submit" id="transfer-btn"
              class="bg-accent hover:bg-accent/90 text-white px-6 py-2 rounded-lg font-medium btn-hover flex items-center">
              <i class="fa-solid fa-exchange-circle mr-2"></i> 确认转移
            </button>
          </div>
        </form>
      </div>
      <div id="transfer-result" class="hidden bg-white rounded-xl shadow-lg p-6 md:p-8 fade-in">
        <div class="flex items-center mb-4">
          <div class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center mr-3">
            <i class="fa-solid fa-check text-success"></i>
          </div>
          <h3 class="text-lg font-bold text-success">资产转移成功</h3>
        </div>
        <div class="bg-gray-50 p-4 rounded-lg mb-4">
          <p class="text-gray-700 mb-2">资产 <span id="transfer-result-id" class="font-semibold"></span> 已成功转移至 <span id="transfer-result-owner" class="font-semibold"></span></p>
          <pre id="transfer-result-json" class="text-gray-700 whitespace-pre-wrap break-words mt-3"></pre>
        </div>
        <div class="flex justify-end">
          <button id="transfer-close" class="text-gray-500 hover:text-gray-700">
            <i class="fa-solid fa-times"></i> 关闭
          </button>
        </div>
      </div>
    </section>

    <!-- 交易历史区域 -->
    <section id="history" class="mb-12">
      <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 slide-up" style="animation-delay: 0.4s;">
        <div class="flex items-center mb-6">
          <div class="w-10 h-10 rounded-full bg-dark/10 flex items-center justify-center mr-3">
            <i class="fa-solid fa-history text-dark"></i>
          </div>
          <h2 class="text-xl md:text-2xl font-bold">交易历史</h2>
        </div>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">交易ID</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">资产ID</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作类型</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作时间</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">详情</th>
              </tr>
            </thead>
            <tbody id="history-table-body" class="bg-white divide-y divide-gray-200">
              <!-- 交易历史记录将通过JavaScript动态添加 -->
              <tr class="text-center">
                <td colspan="5" class="px-6 py-12 text-gray-500">
                  <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-4">
                    <i class="fa-solid fa-folder-open text-gray-400 text-xl"></i>
                  </div>
                  暂无交易记录
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="mt-4 flex justify-center slide-up" style="animation-delay: 0.5s;">
          <button id="load-more-history" class="text-primary hover:text-primary/80 font-medium flex items-center btn-hover">
            <i class="fa-solid fa-refresh mr-1"></i> 加载更多
          </button>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="slide-up" style="animation-delay: 0.5s;">
          <div class="flex items-center space-x-2 mb-4">
            <i class="fa-brands fa-hyperledger text-primary text-2xl"></i>
            <h3 class="text-xl font-bold">区块链资产管理系统</h3>
          </div>
          <p class="text-gray-400">使用 Hyperledger Fabric 构建的企业级区块链应用平台，为资产数字化提供安全、透明、高效的解决方案。</p>
        </div>
        <div class="slide-up" style="animation-delay: 0.6s;">
          <h4 class="text-lg font-semibold mb-4">快速链接</h4>
          <ul class="space-y-2">
            <li><a href="#create" class="text-gray-400 hover:text-white transition-colors duration-300">资产上链</a></li>
            <li><a href="#query" class="text-gray-400 hover:text-white transition-colors duration-300">资产查询</a></li>
            <li><a href="#transfer" class="text-gray-400 hover:text-white transition-colors duration-300">资产转移</a></li>
            <li><a href="#history" class="text-gray-400 hover:text-white transition-colors duration-300">交易历史</a></li>
          </ul>
        </div>
        <div class="slide-up" style="animation-delay: 0.7s;">
          <h4 class="text-lg font-semibold mb-4">联系我们</h4>
          <ul class="space-y-2">
            <li class="flex items-center text-gray-400">
              <i class="fa-solid fa-envelope mr-2"></i>
              <a href="mailto:contact@blockchain.com">contact@blockchain.com</a>
            </li>
            <li class="flex items-center text-gray-400">
              <i class="fa-solid fa-phone mr-2"></i>
              <a href="tel:+86123456789">+86 123 4567 89</a>
            </li>
            <li class="flex items-center text-gray-400">
              <i class="fa-solid fa-map-marker mr-2"></i>
              <span>北京市海淀区中关村科技园区</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 slide-up" style="animation-delay: 0.8s;">
        <p>© 2025 区块链资产管理系统 版权所有</p>
      </div>
    </div>
  </footer>

  <!-- 通知组件 -->
  <div id="notification" class="fixed top-4 right-4 z-50 max-w-sm transform transition-all duration-300 translate-x-full opacity-0">
    <div id="notification-content" class="bg-white rounded-lg shadow-lg p-4 flex items-start">
      <div id="notification-icon" class="mr-3 w-8 h-8 rounded-full flex items-center justify-center"></div>
      <div class="flex-1">
        <h4 id="notification-title" class="font-semibold text-gray-800"></h4>
        <p id="notification-message" class="text-sm text-gray-600 mt-1"></p>
      </div>
      <button id="notification-close" class="text-gray-400 hover:text-gray-600">
        <i class="fa-solid fa-times"></i>
      </button>
    </div>
  </div>

  <script>
    // 模拟资产数据库
    const assetDatabase = new Map();
    const transactionHistory = [];
    
    // API 服务层
    class BlockchainAPI {
      static async createAsset(id, owner, name, info) {
        // 检查资产是否已存在
        if (assetDatabase.has(id)) {
          throw new Error(`资产 ${id} 已存在`);
        }
        
        // 模拟API请求延迟
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        // 创建新资产
        const asset = {
          id,
          owner,
          name,
          info,
          timestamp: new Date().toISOString(),
          transactionId: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
        };
        
        // 添加到数据库
        assetDatabase.set(id, asset);
        
        // 添加到交易历史
        transactionHistory.push({
          transactionId: asset.transactionId,
          assetId: id,
          type: 'CREATE',
          timestamp: asset.timestamp
        });
        
        return asset;
      }
      
      static async queryAsset(id) {
        // 模拟API请求延迟
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        // 检查资产是否存在
        const asset = assetDatabase.get(id);
        if (!asset) {
          throw new Error(`资产 ${id} 不存在`);
        }
        
        return { ...asset };
      }
      
      static async transferAsset(id, newOwner) {
        // 模拟API请求延迟
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        // 检查资产是否存在
        const asset = assetDatabase.get(id);
        if (!asset) {
          throw new Error(`资产 ${id} 不存在`);
        }
        
        // 记录之前的所有者
        const previousOwner = asset.owner;
        
        // 更新资产所有者
        asset.owner = newOwner;
        asset.timestamp = new Date().toISOString();
        asset.transactionId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
        
        // 添加到交易历史
        transactionHistory.push({
          transactionId: asset.transactionId,
          assetId: id,
          type: 'TRANSFER',
          timestamp: asset.timestamp
        });
        
        return {
          id,
          previousOwner,
          newOwner,
          timestamp: asset.timestamp,
          transactionId: asset.transactionId
        };
      }
      
      static async getHistory() {
        // 模拟API请求延迟
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        // 返回交易历史的副本，按时间倒序排列
        return [...transactionHistory].sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
      }
    }

    // 通知系统
    function showNotification(type, title, message) {
      const notification = document.getElementById('notification');
      const notificationIcon = document.getElementById('notification-icon');
      const notificationTitle = document.getElementById('notification-title');
      const notificationMessage = document.getElementById('notification-message');
      
      // 设置通知类型样式
      if (type === 'success') {
        notificationIcon.className = 'mr-3 w-8 h-8 rounded-full flex items-center justify-center bg-success/10';
        notificationIcon.innerHTML = '<i class="fa-solid fa-check text-success"></i>';
      } else if (type === 'error') {
        notificationIcon.className = 'mr-3 w-8 h-8 rounded-full flex items-center justify-center bg-danger/10';
        notificationIcon.innerHTML = '<i class="fa-solid fa-times text-danger"></i>';
      } else if (type === 'warning') {
        notificationIcon.className = 'mr-3 w-8 h-8 rounded-full flex items-center justify-center bg-warning/10';
        notificationIcon.innerHTML = '<i class="fa-solid fa-exclamation text-warning"></i>';
      } else if (type === 'info') {
        notificationIcon.className = 'mr-3 w-8 h-8 rounded-full flex items-center justify-center bg-primary/10';
        notificationIcon.innerHTML = '<i class="fa-solid fa-info text-primary"></i>';
      }
      
      // 设置通知内容
      notificationTitle.textContent = title;
      notificationMessage.textContent = message;
      
      // 显示通知
      notification.classList.remove('translate-x-full', 'opacity-0');
      notification.classList.add('translate-x-0', 'opacity-100');
      
      // 3秒后自动关闭
      setTimeout(() => {
        hideNotification();
      }, 5000);
    }
    
    function hideNotification() {
      const notification = document.getElementById('notification');
      notification.classList.remove('translate-x-0', 'opacity-100');
      notification.classList.add('translate-x-full', 'opacity-0');
    }

    // DOM 加载完成后执行
    document.addEventListener('DOMContentLoaded', () => {
      // 初始化UI组件
      initNavbar();
      initSmoothScroll();
      initAssetCreation();
      initAssetQuery();
      initAssetTransfer();
      initTransactionHistory();
      initFormInputs();
      initButtonEffects();
    });

    // 导航栏交互
    function initNavbar() {
      const menuToggle = document.getElementById('menu-toggle');
      const mobileMenu = document.getElementById('mobile-menu');
      const navbar = document.getElementById('navbar');
      
      // 移动端菜单切换
      menuToggle.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
      });
      
      // 导航栏滚动效果
      window.addEventListener('scroll', () => {
        if (window.scrollY > 10) {
          navbar.classList.add('py-2', 'nav-shadow');
          navbar.classList.remove('py-3', 'shadow-md');
        } else {
          navbar.classList.add('py-3', 'shadow-md');
          navbar.classList.remove('py-2', 'nav-shadow');
        }
      });
    }

    // 平滑滚动
    function initSmoothScroll() {
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
          e.preventDefault();
          
          const targetId = this.getAttribute('href');
          const targetElement = document.querySelector(targetId);
          
          if (targetElement) {
            window.scrollTo({
              top: targetElement.offsetTop - 80,
              behavior: 'smooth'
            });
            
            // 关闭移动端菜单
            const mobileMenu = document.getElementById('mobile-menu');
            if (!mobileMenu.classList.contains('hidden')) {
              mobileMenu.classList.add('hidden');
            }
          }
        });
      });
    }

    // 资产上链功能
    function initAssetCreation() {
      const createForm = document.getElementById('create-form');
      const createResult = document.getElementById('create-result');
      const createResultJson = document.getElementById('create-result-json');
      const createClose = document.getElementById('create-close');
      
      createForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const id = document.getElementById('create-id').value.trim();
        const owner = document.getElementById('create-owner').value.trim();
        const name = document.getElementById('create-name').value.trim();
        const info = document.getElementById('create-info').value.trim();
        
        if (!id || !owner || !name || !info) {
          showNotification('warning', '输入错误', '请填写所有必填字段');
          return;
        }
        
        try {
          // 显示加载状态
          const createBtn = document.getElementById('create-btn');
          createBtn.disabled = true;
          createBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i> 提交中...';
          
          // 调用API
          const result = await BlockchainAPI.createAsset(id, owner, name, info);
          
          // 显示结果
          createResultJson.textContent = JSON.stringify(result, null, 2);
          createResult.classList.remove('hidden');
          
          // 滚动到结果区域
          createResult.scrollIntoView({ behavior: 'smooth' });
          
          // 显示通知
          showNotification('success', '操作成功', `资产 ${id} 已成功上链`);
          
          // 重置按钮状态
          createBtn.disabled = false;
          createBtn.innerHTML = '<i class="fa-solid fa-plus-circle mr-2"></i> 提交上链';
          
          // 重置表单
          createForm.reset();
        } catch (error) {
          // 显示错误通知
          showNotification('error', '操作失败', error.message);
          
          // 重置按钮状态
          const createBtn = document.getElementById('create-btn');
          createBtn.disabled = false;
          createBtn.innerHTML = '<i class="fa-solid fa-plus-circle mr-2"></i> 提交上链';
        }
      });
      
      createClose.addEventListener('click', () => {
        createResult.classList.add('hidden');
      });
    }

    // 资产查询功能
    function initAssetQuery() {
      const queryBtn = document.getElementById('query-btn');
      const queryId = document.getElementById('query-id');
      const queryLoading = document.getElementById('query-loading');
      const queryResult = document.getElementById('query-result');
      const queryNotFound = document.getElementById('query-not-found');
      const queryAssetId = document.getElementById('query-asset-id');
      const queryName = document.getElementById('query-name');
      const queryOwner = document.getElementById('query-owner');
      const queryInfo = document.getElementById('query-info');
      const queryTimestamp = document.getElementById('query-timestamp');
      const queryResultJson = document.getElementById('query-result-json');
      const queryTryAgain = document.getElementById('query-try-again');
      const transferFromQuery = document.getElementById('transfer-from-query');
      
      queryBtn.addEventListener('click', async () => {
        const id = queryId.value.trim();
        
        if (!id) {
          showNotification('warning', '输入错误', '请输入资产ID');
          return;
        }
        
        // 隐藏结果，显示加载状态
        queryResult.classList.add('hidden');
        queryNotFound.classList.add('hidden');
        queryLoading.classList.remove('hidden');
        
        try {
          // 调用API
          const result = await BlockchainAPI.queryAsset(id);
          
          // 显示结果
          queryAssetId.textContent = result.id;
          queryName.textContent = result.name;
          queryOwner.textContent = result.owner;
          queryInfo.textContent = result.info;
          queryTimestamp.textContent = new Date(result.timestamp).toLocaleString();
          queryResultJson.textContent = JSON.stringify(result, null, 2);
          
          queryLoading.classList.add('hidden');
          queryResult.classList.remove('hidden');
          
          // 滚动到结果区域
          queryResult.scrollIntoView({ behavior: 'smooth' });
          
          // 显示通知
          showNotification('info', '查询成功', `资产 ${id} 信息已获取`);
        } catch (error) {
          // 显示未找到
          queryLoading.classList.add('hidden');
          queryNotFound.classList.remove('hidden');
          
          // 滚动到结果区域
          queryNotFound.scrollIntoView({ behavior: 'smooth' });
          
          // 显示通知
          showNotification('error', '查询失败', error.message);
        }
      });
      
      queryTryAgain.addEventListener('click', () => {
        queryNotFound.classList.add('hidden');
        queryId.focus();
      });
      
      // 从查询结果直接转移资产
      transferFromQuery.addEventListener('click', () => {
        const assetId = queryAssetId.textContent;
        if (assetId) {
          document.getElementById('transfer-id').value = assetId;
          document.getElementById('transfer-owner').focus();
          
          // 滚动到转移区域
          document.getElementById('transfer').scrollIntoView({ behavior: 'smooth' });
        }
      });
    }

    // 资产转移功能
    function initAssetTransfer() {
      const transferForm = document.getElementById('transfer-form');
      const transferResult = document.getElementById('transfer-result');
      const transferResultId = document.getElementById('transfer-result-id');
      const transferResultOwner = document.getElementById('transfer-result-owner');
      const transferResultJson = document.getElementById('transfer-result-json');
      const transferClose = document.getElementById('transfer-close');
      
      transferForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const id = document.getElementById('transfer-id').value.trim();
        const newOwner = document.getElementById('transfer-owner').value.trim();
        
        if (!id || !newOwner) {
          showNotification('warning', '输入错误', '请填写资产ID和新所有者');
          return;
        }
        
        try {
          // 显示加载状态
          const transferBtn = document.getElementById('transfer-btn');
          transferBtn.disabled = true;
          transferBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i> 处理中...';
          
          // 调用API
          const result = await BlockchainAPI.transferAsset(id, newOwner);
          
          // 显示结果
          transferResultId.textContent = result.id;
          transferResultOwner.textContent = result.newOwner;
          transferResultJson.textContent = JSON.stringify(result, null, 2);
          transferResult.classList.remove('hidden');
          
          // 滚动到结果区域
          transferResult.scrollIntoView({ behavior: 'smooth' });
          
          // 显示通知
          showNotification('success', '操作成功', `资产 ${id} 已转移至 ${newOwner}`);
          
          // 重置按钮状态
          transferBtn.disabled = false;
          transferBtn.innerHTML = '<i class="fa-solid fa-exchange-circle mr-2"></i> 确认转移';
          
          // 重置表单
          transferForm.reset();
        } catch (error) {
          // 显示错误通知
          showNotification('error', '操作失败', error.message);
          
          // 重置按钮状态
          const transferBtn = document.getElementById('transfer-btn');
          transferBtn.disabled = false;
          transferBtn.innerHTML = '<i class="fa-solid fa-exchange-circle mr-2"></i> 确认转移';
        }
      });
      
      transferClose.addEventListener('click', () => {
        transferResult.classList.add('hidden');
      });
    }

    // 交易历史功能
    function initTransactionHistory() {
      const loadMoreHistory = document.getElementById('load-more-history');
      const historyTableBody = document.getElementById('history-table-body');
      
      loadMoreHistory.addEventListener('click', async () => {
        // 显示加载状态
        loadMoreHistory.disabled = true;
        loadMoreHistory.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-1"></i> 加载中...';
        
        try {
          // 调用API获取历史记录
          const history = await BlockchainAPI.getHistory();
          
          if (history.length === 0) {
            historyTableBody.innerHTML = `
              <tr class="text-center">
                <td colspan="5" class="px-6 py-12 text-gray-500">
                  <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-4">
                    <i class="fa-solid fa-folder-open text-gray-400 text-xl"></i>
                  </div>
                  暂无交易记录
                </td>
              </tr>
            `;
          } else {
            // 清空原有记录（仅保留表头）
            historyTableBody.innerHTML = '';
            
            // 添加交易记录
            history.forEach((transaction, index) => {
              const row = document.createElement('tr');
              row.className = 'hover:bg-gray-50 transition-colors duration-200';
              row.innerHTML = `
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm font-medium text-gray-900">${transaction.transactionId}</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-gray-900">${transaction.assetId}</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${transaction.type === 'CREATE' ? 'bg-green-100 text-green-800' : 'bg-purple-100 text-purple-800'}">
                    ${transaction.type === 'CREATE' ? '创建' : '转移'}
                  </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  ${new Date(transaction.timestamp).toLocaleString()}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-primary">
                  <button class="hover:text-primary/80 font-medium view-details" data-id="${transaction.transactionId}">
                    查看详情
                  </button>
                </td>
              `;
              
              // 添加淡入动画
              row.style.opacity = '0';
              historyTableBody.appendChild(row);
              
              // 触发重排后添加动画
              setTimeout(() => {
                row.style.transition = 'opacity 0.5s ease';
                row.style.opacity = '1';
              }, 50 * index);
            });
            
            // 添加交易详情查看功能
            document.querySelectorAll('.view-details').forEach(button => {
              button.addEventListener('click', () => {
                const transactionId = button.getAttribute('data-id');
                const transaction = history.find(t => t.transactionId === transactionId);
                showNotification('info', '交易详情', `
                  交易ID: ${transaction.transactionId}
                  资产ID: ${transaction.assetId}
                  操作类型: ${transaction.type === 'CREATE' ? '创建' : '转移'}
                  时间: ${new Date(transaction.timestamp).toLocaleString()}
                `);
              });
            });
          }
          
          // 显示通知
          showNotification('info', '加载完成', `成功加载 ${history.length} 条交易记录`);
        } catch (error) {
          // 显示错误通知
          showNotification('error', '加载失败', error.message);
        } finally {
          // 重置按钮状态
          loadMoreHistory.disabled = false;
          loadMoreHistory.innerHTML = '<i class="fa-solid fa-refresh mr-1"></i> 加载更多';
        }
      });
      
      // 初始加载交易历史
      loadMoreHistory.click();
    }

    // 表单输入框交互
    function initFormInputs() {
      // 为所有输入框添加获得焦点时的动画效果
      document.querySelectorAll('input').forEach(input => {
        input.addEventListener('focus', () => {
          input.parentElement.classList.add('scale-hover');
        });
        
        input.addEventListener('blur', () => {
          input.parentElement.classList.remove('scale-hover');
        });
      });
    }

    // 按钮效果
    function initButtonEffects() {
      // 为所有按钮添加点击波纹效果
      document.querySelectorAll('button').forEach(button => {
        button.addEventListener('click', function(e) {
          // 创建波纹元素
          const circle = document.createElement('span');
          const diameter = Math.max(button.clientWidth, button.clientHeight);
          const radius = diameter / 2;
          
          // 设置波纹的位置和大小
          circle.style.width = circle.style.height = `${diameter}px`;
          circle.style.left = `${e.clientX - button.getBoundingClientRect().left - radius}px`;
          circle.style.top = `${e.clientY - button.getBoundingClientRect().top - radius}px`;
          circle.classList.add('ripple');
          
          // 移除旧的波纹元素
          const ripple = button.querySelector('.ripple');
          if (ripple) {
            ripple.remove();
          }
          
          // 添加新的波纹元素
          button.appendChild(circle);
        });
      });
      
      // 添加波纹效果的CSS
      const style = document.createElement('style');
      style.textContent = `
        .ripple {
          position: absolute;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.3);
          transform: scale(0);
          animation: ripple 0.6s linear;
          pointer-events: none;
        }
        
        @keyframes ripple {
          to {
            transform: scale(4);
            opacity: 0;
          }
        }
        
        button {
          position: relative;
          overflow: hidden;
        }
      `;
      document.head.appendChild(style);
    }

    // 通知关闭按钮
    document.getElementById('notification-close').addEventListener('click', hideNotification);
  </script>
</body>
</html>